<template>
    <!-- logo和搜索框 -->
    <LogoAndSearch></LogoAndSearch>

    <!-- 顶部信息栏 -->
    <TopInfo></TopInfo>

    <!-- 导航菜单栏 -->
    <NavMenu></NavMenu>

    <!-- 侧边栏 -->
    <el-menu text-color="#000" style="width: 200px;position: relative;top:100px;left:50px" @open="handleOpen"
        @close="handleClose" router default-active="myticket">

        <!-- 订单中心 -->
        <el-menu-item index="orders">
            <template #title>
                <el-icon>
                    <TrendCharts />
                </el-icon>
                <span style="color: #409EFF;">订单中心</span>
            </template>
        </el-menu-item>

        <!-- 本人车票 -->
        <el-menu-item index="myticket">
            <template #title>
                <el-icon>
                    <List />
                </el-icon>
                <span>本人车票</span>
            </template>
        </el-menu-item>

        <!-- 会员中心 -->
        <el-menu-item>
            <template #title>
                <el-icon>
                    <UserFilled />
                </el-icon>
                <span>会员中心</span>
            </template>

        </el-menu-item>

        <!-- 个人信息 -->
        <el-sub-menu index="myinfo">
            <template #title>
                <el-icon>
                    <Promotion />
                </el-icon>
                <span>个人信息</span>
            </template>
            <el-menu-item index="view">查看个人信息</el-menu-item>
            <el-menu-item>账号安全</el-menu-item>
            <el-menu-item>手机核验</el-menu-item>

        </el-sub-menu>

        <!-- 常用信息管理 -->
        <el-sub-menu index="user">
            <template #title>
                <el-icon>
                    <Histogram />
                </el-icon>
                <span>常用信息管理</span>
            </template>
            <el-menu-item index="passenger">乘车人管理</el-menu-item>
            <el-menu-item>地址管理</el-menu-item>
        </el-sub-menu>

    </el-menu>

    <!-- 内容区域 -->
    <div style="position: absolute;top:180px;left: 300px;width:80% ;">
        <el-select v-model="value" placeholder="Select" style="margin-right: 20px;">
            <el-option value="按订票日期查询"></el-option>
            <el-option value="按车票日期查询"></el-option>
        </el-select>

        <el-input v-model="input" placeholder="订单号/车次/姓名" clearable style="width: 200px;margin-right: 20px;" />
        <el-button>查询</el-button>

        <el-table :data="myTicket" style="width:1050px" stripe>


            <el-table-column label="车次" width="300" header-align="center">
                <template #default="{ row }">
                    <div style="text-align: center;">
                        <p style="font-weight: 900;"> {{ row.fromnm.slice(0, row.fromnm.length - 1) }} -> {{
                            row.tonm.slice(0, row.tonm.length - 1) }}&emsp;{{ row.trainno }}</p>
                   
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="出发/到达时间" width="200" header-align="center">
                <template #default="{ row }">
                    <div style="text-align: center;">
                        <p>{{ row.fromtime }} -- {{ row.totime }}</p>

                    </div>
                </template>
            </el-table-column>

            <el-table-column label="席位" width="200" header-align="center">

                <template #default="{ row }">
                    <div style="text-align: center;">
                        <p> {{ row.seattype }} </p>
                        <p> {{ row.carriage }}车0{{ row.rows }}{{ row.seat }}号</p>
                    </div>
                </template>

            </el-table-column>

            <el-table-column label="票价" width="200" header-align="center">
                <template #default="{ row }">
                    <div style="text-align: center;">
                        <p> 成人票 </p>
                        <p style="color: orange;"> {{ row.money }}元</p>
                    </div>
                </template>


            </el-table-column>


            <el-table-column label="出发日期" width="150" header-align="center">
                <template #default="{ row }">
                    <div style="text-align: center;">
                        <p> {{ row.date }} </p>
                       
                    </div>
                </template>

            </el-table-column>

        </el-table>

    </div>
</template>
  
<script setup>

import NavMenu from '../../components/home/NavMenu.vue'
import TopInfo from '../../components/home/TopInfo.vue'
import LogoAndSearch from '../../components/home/LogoAndSearch.vue'

import { TrendCharts, List, UserFilled, Promotion, Histogram } from '@element-plus/icons-vue'

import { ref } from 'vue'
// import { useRouter } from "vue-router";

// const router = useRouter();

// eslint-disable-next-line vue/prefer-import-from-vue
// import { getCurrentInstance } from "@vue/runtime-core";


import { useOrdersStore } from '../../stores/orders'

// 引入storeToRefs
import { storeToRefs } from 'pinia'

//实例化对象
const ordersStore = useOrdersStore()

const { myTicket } = storeToRefs(ordersStore)

ordersStore.queryMyTicket()

const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}
let value = ref("按订票日期查询")
let input = ref('')


</script>

<style scoped>
.el-table .el-table__header th div {
    text-align: center;
}
</style>